<template>
  <div>
    <div class="banner-container" v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('gx') == -1 ">
    <swiper
      class="banner"
      :options="swiperListOption"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="item in swiperList">
        <img style="width: 100%;cursor: pointer;height: 440px;" :data-id="item.id" :src="item.adImagePath" alt="">
        <!--<img style="width: 100%;" :data-id="item.id"  src="http://localhost/static/images/dx-swiper.jpg" alt="">-->
      </swiper-slide>
    </swiper>
    <div class="swiper-pagination1"></div>
  </div>
    <!--河北国资委-->
    <div class="banner-container" style="height: 640px;" v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('gx') !== -1">
      <swiper
        class="banner"
        :options="swiperListOption"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="item in swiperList">
          <img style="width: 100%;cursor: pointer;height: 640px;" :data-id="item.id" :src="item.adImagePath" alt="">
          <!--<img style="width: 100%;" :data-id="item.id"  src="http://localhost/static/images/dx-swiper.jpg" alt="">-->
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination1"></div>
    </div>

    <div class="login-box-container" v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('aishangxue') == -1">
      <div class="login-container" v-if="!$store.state.user.token">
        <Login :title="'欢迎登录'" />
      </div>
      <div class="account-container" v-else>
        <UserInfo/>
      </div>
    </div>

    <div class="login-box-container" v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('aishangxue') !== -1">
      <div class="login-container aishangxue-login-container" v-if="!$store.state.user.token">
        <Login2 :title="'欢迎登录'" />
      </div>
      <div class="account-container" v-else>
        <UserInfo/>
      </div>
    </div>
    <!--  流程进度条-->
    <div class="indexBg" v-if="adsList.length !== 0">
      <div class="select-course-filter" v-for="item in adsList" @click="toSwiper(item)">
        <img :src="item.adImagePath" alt="">
      </div>
    </div>

    <div v-if="$store.state.app.footer.webTemplateType &&  ($store.state.app.footer.webTemplateType.indexOf('gx') == -1 && $store.state.app.footer.webTemplateType.indexOf('aishangxue') == -1) ">
      <div class="recommend-course-container">
        <div>
          <div class="recommend-course">
            <header>
              <h1><img src="~@assets/images/recommend-course-Icon.png" alt="">推荐课程</h1>
              <!--<img src="~@assets/images/more.png" alt="">-->
            </header>

            <section>
              <ul>
                <li v-for="item  in recommendCourseList" :key="item.id">
                  <div class="course-img" @click="toClass(item.id)">
                    <img src="~@assets/images/course_login.png" v-real-img="item.picPath" alt="">
                  </div>
                  <!--<div class="credit"> 2.5学时</div>-->
                  <div class="bottom">
                    <div class="title ellipsis-one" :title="$utils.unEscapeHTML(item.name)" @click="toClass(item.id)">
                      {{$utils.unEscapeHTML(item.name)}}
                    </div>
                    <div>
                      <img src="~@assets/images/userIcon.png" alt="">
                      <span>{{item.teacherName}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </section>
          </div>
          <div class="announcements">
            <header>
              <h1>通知公告</h1>
              <img src="~@assets/images/more.png" alt="" @click="$router.push('/notice')">
            </header>
            <section>
              <ul>
                <li v-for="item in noticeList" :key="item.id" @click="toDetail(item.id,'notice')" class="item ellipsis-one" :title="item.title">
                  <img src="~@assets/images/notice-Icon.png" alt="">
                  {{item.title}}
                </li>
              </ul>
            </section>
          </div>
        </div>

      </div>
      <div class="popular-major-container">
        <div class="popular-major">
          <header>
            <h1><img src="~@assets/images/popular-major-Icon.png" alt="">热门专业</h1>
            <!--<img src="~@assets/images/more.png" alt="">-->
          </header>
          <swiper
            class="popular-major-list"
            :options="swiperOption"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
          >
            <swiper-slide class="item" v-for="item in specialList" :key="item.id">
              <img src="~@assets/images/course_login.png" v-real-img="item.pic"
                   @click="showTcourse(item.id)" alt="">
              <p>{{item.name}}</p>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="teacher-recommended-container">
        <div class="teacher-recommended">
          <header>
            <h1><img src="~@assets/images/teacher-recommended-Icon.png" alt="">名师推荐</h1>
          </header>
          <section>
            <swiper
              class="teacher-list "
              :options="swiperTeacherOption"
              @swiper="onSwiper"
              @slideChange="onSlideChange"
            >
              <swiper-slide class="teacher-item" v-for="item in teacherList" :key="item.teacherId">
                <div class="teacher-box">
                  <img :src="item.picPath"  alt="">
                  <span>{{item.teacherName}}</span>
                </div>
                <div class="bottom">
                  <div>{{item.teacherInfo}}</div>
                </div>
              </swiper-slide>
            </swiper>
            <div class="swiper-button-prev left button" slot="button-prev">
              <img src="~@assets/images/right-btn.png" alt="">
            </div>
            <div class="swiper-button-next right button" slot="button-next">
              <img src="~@assets/images/right-btn.png" alt="">
            </div>
          </section>

        </div>
      </div>
    </div>

    <!--飘窗-->
    <div id="Div2" style="position:relative;z-index: 99999;" v-show="pcImgList.length !== 0 && pcImgFlag">
      <img style="cursor:pointer;"  @click="openUrl(pcImgList[0].adOpenWay,pcImgList[0].adUrl)"
           :src="pcImgList[0] &&pcImgList[0].adImagePath" alt="">
      <i style="position:absolute;right: 10px;top: 10px;cursor:pointer;font-size: 18px;"
         class="el-icon-circle-close el-icon"  @click="pcImgFlag = false"></i>
    </div>
  </div>
</template>

<script>
  import index from "./indexjs";

  export default {
    ...index
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";
</style>
